身につけておきたいWebサイト高速化テクニック #4｜最適な画像書き出しの基本

Webサイト高速化テクニック

#パフォーマンス

#ビジュアルデザイン

#デザイン

#Adobe Photoshop

#HTML5

野中龍一

2013.05.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

最適な画像書き出しの基本

みなさんこんにちは、クラスメソッドWeb担当の野中です。
昨日行われたAdobe MAXの発表でFireworksの新機能開発が終了 ^*1だそうですね。びっくりです。

さて、前回の身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識では、画像の品質を保ちながらファイルサイズを抑えるためにそれぞれの画像形式の特性について紹介しました。

第3回でリクエスト数の削減について先に解説すると記載していますが、文章の構成を考えると画像の書き出しについて先に説明した方が流れとしてわかりやすいので順番を変更しています。

本題

今回はPhotoshopやIllustrator、Fireworksを使った最適な画像書き出しの基本的な手法について紹介したいと思います。
前回の記事で得た知識を前提に解説しますので、まだ前回の記事を読んでいない方は必ず読んでおいてください。

この記事の対象者

Webデザイナー
フロントエンドエンジニア
Webディレクター
Web担当者

この記事では特にWebデザイナーの方に向けてPhotoshopやIllustrator、Fireworksなどのツールを業務で利用している前提で解説します。
ツールの使い方については解説を省きますのでご了承ください。

画像最適化のポイントのお復習い

前回も紹介しましたが、改めて画像最適化のポイントについて確認しておきましょう。

ファイルサイズを抑える
- 画像形式それぞれの特性を知り適切な画像形式を選択する
- 人の目にはわからない程度に画質を調整しファイルサイズを削減する
- ムダなメタデータの削除
リクエスト数の削減
- インラインイメージ
- CSS Sprite
- Webフォントアイコンの利用
- イメージマップ
- 画像を使わずCSS3で対応
レンダリングの負荷を減らす
- 画像のサイズ（width,height）を指定

今回は「画像形式それぞれの特性を知り適切な画像形式を選択する」をベースに「人の目にはわからない程度に画質を調整しファイルサイズを削減する」「ムダなメタデータの削除」がポイントになります。

1，最適な画像形式を検証

それでは、デザイン時によく利用されるようなアイコン・ボタン・写真を例に最適な画像形式について検証してみましょう。
具体的なイメージを用意し細かなオプションを確認しながらそれぞれの形式を比較します。

1.1，デザインツールについて

環境はPhotoshop CS6（Mac）で解説します。
紹介する内容はデザインやその他の外部要因によって最適な画像形式が異なってきます。あくまでも参考例とし、実際に行う際は必ず自身で確認しながら最適化してみてください。

今回はPhotoshopを使い検証しますが、IllustratorやFireworksでも考え方は同じです。
それぞれのツールで書き出し時に比較をし適切な画像形式で書き出しを行いましょう。

1.2，アルゴリズムや仕様について

画像形式の使い分けは圧縮アルゴリズムや画像形式の仕様を理解した上で適切に書き出しを行うことがベストです。
具体的に解説できれば良いのですが、私は人にわかりやすく解説できるほどのアルゴリズムや各形式の仕様に関する知識を有していないのでこの記事では省かせていただきます。気になる方はご自身で調べてみてください。

画像のサイズを抑えるためにアルゴリズムや画像形式の仕様を気にしすぎるのは本末転倒です。

2，検証：べた塗りアイコン

それでは、このシンプルなアイコンを最適化してみましょう。
この例ではGIF、PNG-8、PNG-32（Photoshop上はPNG-24と表記されていますが、この記事ではPNG-32と表記します。）の書き出しを比較してみます。JPEGは写真向きなのでこの例では候補から外します。

2.1，サンプルアイコン

プレビュー

このブログの背景では色がかぶっていますが、サンプルはグレーのアイコンです。

アイコンサンプル

サイズ

横幅	50px
高さ	50px

2.2，書き出し時のキャプチャ

書き出し時の状態比較

見た目に大きな違いはありませんね。細かなオプションとファイルサイズを確認してみましょう。

2.3，条件と結果

形式	減色アルゴリズム ^*2	ディザアルゴリズム ^*3	色数制限 ^*4	透明色	マット	段階的表示 ^*5	メタデータ	ファイルサイズ ^*6
GIF	特定	誤差拡散法	8	有り	ホワイト	無し	無し	280 Byte
PNG-8	特定	誤差拡散法	8	有り	ホワイト	無し	無し	373 Byte
PNG-32	-	-	-	有り	-	無し	無し	678 Byte

実際に試した設定状態とPhotoshopで書き出しプレビュー時のファイルサイズを表にしてみました。
単純にファイルサイズだけを重視するのであればgif形式が向いるようです。ただし、アルファチャネルを利用しなければならない場合はその限りではありません。
また、圧縮率を考えると画像のキャンバスサイズが大きいほどPNGの方がファイルサイズが小さくなります。

3，検証：グラデーションボタンの書き出し

続いてグラデーションのかかったボタンを試してましょう。
こちらも写真ではないのでJPEGを抜いたGIF、PNG-8、PNG-32を比較したいと思います。

3.1，サンプルボタン

サンプル用のボタンをさくっと作りました。
この例ではボタンのアフォーダンスについては言及しません。CSS Spriteを前提とせずアフォーダンスごとに別々の画像を用意することを前提とします。

イメージ

ボタンサンプル

画像のサイズ

横幅	300px
高さ	100px

3.2，書き出し時のキャプチャ

ボタン書き出し時の状態比較

この程度のグラデーションであれば、GIF・PNG-8でも遜色なく利用できそうですね。
ファイルサイズを見るとアイコンとは違う結果が出ています。

3.3，条件と結果

形式	減色アルゴリズム	ディザアルゴリズム	色数制限	透明色	マット	段階的表示	メタデータ	ファイルサイズ
GIF	特定	誤差拡散法	64	有り	ホワイト	無し	無し	2.861 KB
PNG-8	特定	誤差拡散法	64	有り	ホワイト	無し	無し	1.625 KB
PNG-32	-	-	-	有り	-	無し	無し	3.445 KB

ファイルサイズを見るとGIFよりもPNG-8が軽い結果になりました。
1KB以上違うというのは結構な違いです。また、GIFとPNG-32が0.6KB程度の差となりました。先ほどのアイコンと違いキャンバスのサイズも少し大きくなっているのでPNGの圧縮率の高さが影響してきているのでしょうか。

3.4，PNG-8のカラーテーブル最大色数について

上記でPNG-8が軽い結果になりましたが、最大色数を調整するとどうなるかも確認してみましょう。
この比較では最大色数を32/64/128とします。

PNG-8最大色数の最適化

比較してみると最大色数32色にした場合グラデーションのムラが目立っています。
64色はぱっと見たところでは気になりませんがよく見ると少しだけムラがあるように思います。128色はとても綺麗ですね。

形式	色数	マット	段階的表示	メタデータ	ファイルサイズ
GIF	32	ホワイト	無し	無し	1.262 KB
GIF	64	ホワイト	無し	無し	1.625 KB
GIF	128	ホワイト	無し	無し	2.043 KB

この3つを比べると128色でもファイルサイズはそれほど重くありませんが、軽微なムラを気にしなければファイルサイズとのバランスを考えると64色がよさそうです。

4，検証：写真

最後に写真の書き出しについて比較します。
できればRAWデータを用意すべきでしたがちょうど良いものがなかったのでJPEGを使います。GIF・JPEG・PNG-32それぞれの形式に再び書き出しファイルサイズを比較してみました。

4.1，サンプル写真

イメージ

サンプル写真

画像のサイズ

横幅	960px
高さ	960px

4.2，書き出し時のキャプチャ

書き出し時の状態比較

拡大してみるとJPEGの8*8ブロックがよくわかりますね。
GIFは色数を最大の256色にしていますが流石に劣化は避けられません。JPEGの場合は非可逆圧縮なのでさらにファイルサイズは抑えられますが、代わりに書き出しを行う度に劣化していきます。PNG-32は見た目上は元画像と差はありません。ただし、可逆圧縮なのでファイルサイズが激増しています。

4.3，条件と結果

比較するまでもありませんが、JPEGのファイルサイズが圧倒的に小さいですね。

形式	減色アルゴリズム	ディザアルゴリズム	色数制限	画質 ^*7	透明色	マット	段階的表示	メタデータ	ファイルサイズ
GIF	特定	誤差拡散法	256	-	無し	ホワイト	無し	無し	588.6 KB
JPEG （最適化オプションON ^*8）	-	-	フルカラー	60	無し	ホワイト	無し	無し	189.2 KB
PNG-32	-	-	-	-	有り	-	無し	無し	1.259 MB